// useHikvisionPlayer.js
// https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20 引入 海康 H5视频播放器开发包 引入静态资源 Bin 目录 h5player.min.js

import { ref, onUnmounted } from 'vue'
/**
 * 使用海康播放器封装播放和暂停功能
 * @returns {Object} 主要暴露了两个函数 playVideo 和 pauseVideo。
 */
export const useHikvisionPlayer = () => {
  const players = ref([]) // 用来存储播放器实例

  /**
   * 播放海康播放器视频
   * @param {Object} video - 视频配置对象
   * @param {string} video.url - 播放器视频URL
   * @param {string} video.id - 播放器容器ID
   * @param {string} [video.basePath='./player/bin'] - 可选参数，播放器的基础路径
   */
  const playVideo = (video) => {
    const { url, id, basePath = './player/bin' } = video // 静态资bin目录路径

    // 获取播放器容器元素
    const videoElement = document.getElementById(id)
    if (!videoElement) {
      console.error(`播放器容器（ID: ${id}）未找到`)
      return
    }

    // 创建海康播放器实例
    const player = new window.JSPlugin({
      szId: id, // 播放器容器ID
      szBasePath: basePath, // 基础路径
      iMaxSplit: 4, // 最大分割窗口
      iCurrentSplit: 1, // 当前窗口
      openDebug: false, // 开启调试
      oStyle: {
        borderSelect: '#ffffff', // 设置播放器边框颜色
      },
    })

    // 播放器开始播放视频
    player
      .JS_Play(url, { playURL: url }, 0)
      .then(() => {
        console.log(`海康播放器 ${id} 播放开始`)
      })
      .catch((e) => {
        console.error(`启动海康播放器 ${id} 时出错:`, e)
      })

    // 存储播放器实例
    players.value.push(player)
  }

  /**
   * 暂停海康播放器视频
   * @param {string} id - 播放器容器ID
   */
  const pauseVideo = (id) => {
    const player = players.value.find((p) => p.szId === id)
    if (player) {
      player
        .JS_Pause()
        .then(() => {
          console.log(`海康播放器 ${id} 暂停`)
        })
        .catch((e) => {
          console.error(`暂停海康播放器 ${id} 时出错:`, e)
        })
    } else {
      console.error(`播放器 ${id} 未找到`)
    }
  }

  /**
   * 销毁播放器实例，释放资源
   */
  const destroyed = () => {
    try {
      players.value.forEach((player) => {
        if (player) {
          player
            .JS_Stop(0)
            .then(() => {
              console.log('停止播放器')
            })
            .catch((e) => {
              console.error('停止播放器时出错:', e)
            })
          player.JS_Disconnect()
          player.JS_Destroy()
        }
      })
    } catch (error) {
      console.info('停止播放器时出错:', error)
    } finally {
      players.value = []
    }
  }

  // 在组件卸载时销毁播放器实例
  onUnmounted(() => {
    destroyed()
  })

  return {
    playVideo,
    pauseVideo,
    destroyed,
  }
}
